<template>
  <div style="margin-top:20px;margin-right:20px">
        <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="230px" class="demo-ruleForm" >
            <el-row>
                <el-col :span="12">
                    <el-form-item label="小区" prop="neibor">
                        <el-input v-model="ruleForm.neibor"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="手机号" prop="phoneNumber">
                        <el-input v-model="ruleForm.phoneNumber"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="身份证" prop="idCard">
                        <el-input v-model="ruleForm.idCard"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="家庭住址" prop="homeAddress">
                        <el-input v-model="ruleForm.homeAddress"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="车牌号" prop="carNumber">
                        <el-input v-model="ruleForm.carNumber"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                <el-form-item label="是否健康">
                  <el-radio-group v-model="ruleForm.isHealthy" prop="isHealthy">
                    <el-radio :label="0">否</el-radio>
                    <el-radio :label="1">是</el-radio>
                  </el-radio-group>
                </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="有无重点地区居住、旅行、接触史">
                    <el-radio-group v-model="ruleForm.traval" prop="traval">
                      <el-radio :label="0">无</el-radio>
                      <el-radio :label="1">有</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                  <el-form-item label="体温"  prop="temper">
                    <el-input-number v-model="ruleForm.temper" :min="35" :max="42"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="年龄"  prop="age">
                    <el-input-number v-model="ruleForm.age" :min="1" :max="80"></el-input-number>
                  </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="患者住院时间" prop="date">
                        <el-date-picker v-model="ruleForm.date" type="date" placeholder="住院时间" prop="date"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="症状" prop="zz">
                        <el-input v-model="ruleForm.zz"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="备注">
              <el-input type="textarea" v-model="ruleForm.desc" rows="4"></el-input>
            </el-form-item>
            <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
            <el-button @click="resetForm('ruleForm')">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>


<script>

  export default {
    data() {
      return {
        ruleForm: {
          neibor: '',
          name: '',
          phoneNumber: '',
          idCard: '',
          homeAddress: '',
          carNumber: '',
          desc: '',
          isHealthy:'',
          traval:'',
          temper:undefined,   //数字类型，没有默认值时，填undefined
          age:undefined,
          date:'',
          zz:''
        },
        pickerOptions: {
            disabledDate(time) {
                return time.getTime() > Date.now();
            },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        rules:{
          name: [
            { required: true, message: '请输入姓名！', trigger: 'blur' },
            { min: 1, max: 15, message: '长度在 1 到 15 个字符！', trigger: 'change' }    //change:内容发生改变时进行校验     ,失去焦点就不再提示
          ],
          neibor: [
            { required: true, message: '请输入小区名称！', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符！', trigger: 'blur' }
          ],
          phoneNumber: [
            { required: true, message: '请输入手机号！', trigger: 'blur' },
            {  min:11, max:11, message: '手机号格式错误！', trigger: 'change' }
          ],
          idCard: [
            { required: true, message: '请输入身份证号！', trigger: 'blur' },
            {  min:18, max:18, message: '身份证号格式错误！', trigger: 'change' }
          ],
          homeAddress: [
            { required: true, message: '请填写家庭住址！', trigger: 'blur' },
            {  min:5, max:15, message: '身份证号格式错误！', trigger: 'change' }
            ],
          carNumber: [
            { required: true, message: '请输入车牌号！', trigger: 'blur' },
            {  min:7, max:8, message: '车牌号格式错误！', trigger: 'change' }
          ],
          isHealthy:[
            { required: true, message: '请选择选项！', trigger: 'change' },  
          ],      
          date: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          temper: [
            { required: true, message: '请填写体温！', trigger: 'blur' },
          ],
          age: [
            { required: true, message: '请填写年龄！', trigger: 'change' },
          ],
        }
      }
    },
    methods: {
        submitForm(formName) {
        this.$refs[formName].validate(
          (valid) => {
            if (valid) {
              this.$message({
                message: '保存成功！',
                type: 'success'
              });
            } else {
              console.log('error submit!!');
              return false;
            }
          }
        );
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>
